<!--#ifdef H5 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '历史沟通记录',
  },
}
</route>
<!-- #endif -->

<script setup lang="ts">
import UseTab from '@/components/use-tabs/index.vue'
import DownIcon from '@/static/images/history/down-icon.png'
import CopyIcon from '@/static/images/history/copy-icon.png'
import CommunicationRecordsView from '@/pages/history/components/communicationRecordsView.vue'
import CourseView from '@/pages/history/components/courseView.vue'
import historyMessageHooks from '@/hooks/historyMessageHooks'
import { Student } from '@/models/historyMessageModels'

const { parentDetails, ...callback } = historyMessageHooks()
const id = ref<number>()
const studentId = ref<number>()
const mobile = ref<string>()
const selectStudentName = ref('')
const dialogRef = ref()
const tabState = reactive({
  active: 0,
  list: [
    { title: '沟通记录', value: 0 },
    { title: '全部课程', value: 1 },
  ],
})
const columns = ref([])

onMounted(() => {
  callback.contactDetail(id.value, () => {
    studentId.value = parentDetails.value.student[0].id
    selectStudentName.value = parentDetails.value.student[0].real_name
    mobile.value = parentDetails.value.student[0].mobile
    parentDetails.value.student.forEach((item: Student) => {
      columns.value.push({ value: item.id, label: item.real_name })
    })
  })
})

onLoad((option) => {
  id.value = option.id
})

function pickerChange(e) {
  selectStudentName.value = columns.value.find((item) => item.value === studentId.value).label
}

function onClickCopyTab() {
  uni.setClipboardData({
    data: parentDetails.value.mobile,
    success: function (res) {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    },
  })
}
</script>

<template>
  <view style="padding: 32rpx; background: #f8f9fb">
    <view style="position: sticky; top: 0">
      <view class="round-corners linear-hor">
        <view class="align-center" style="width: 340rpx">
          <view class="align-center" @click.stop="dialogRef.open()">
            <wd-text :text="selectStudentName || '请选择'" color="#2B2F36" size="28rpx" />
            <span style="width: 16rpx" />
            <wd-img :src="DownIcon" width="48rpx" height="48rpx" />
          </view>
        </view>

        <view class="line" />
        <view class="align-center" style="width: 340rpx" @click="onClickCopyTab">
          <wd-text :text="parentDetails.mobile" color="#6A707C" size="28rpx" />
          <span style="width: 16rpx" />
          <wd-img :src="CopyIcon" width="48rpx" height="48rpx" />
        </view>
      </view>
      <view style="margin: 12rpx 0; background: #f8f9fb">
        <UseTab :list="tabState.list" v-model="tabState.active"></UseTab>
      </view>
    </view>

    <CommunicationRecordsView
      :studentId="studentId"
      :mobile="mobile"
      v-show="tabState.active === 0"
    />
    <CourseView :studentId="studentId" v-show="tabState.active === 1" />
    <wd-picker
      ref="dialogRef"
      title="选择学生"
      value-key="value"
      label-key="label"
      :columns="columns"
      v-model="studentId"
      @confirm="pickerChange"
      use-default-slot
    />
  </view>
</template>

<style scoped lang="scss">
.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32rpx;
}

.align-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  width: 2rpx;
  height: 40rpx;
  background: #ebedf2;
}
</style>
